<template>
  <div>
    <PageList>
      <template #header>
        <div style="width: 100%; overflow: hidden;">
          <div style="float: left;">自定义工具栏</div>
        </div>
      </template>
      <template #filter>
        <el-form ref="RefForm" :model="quickData" label-width="140px" status-icon>
          <el-form-item class="wid" label="快捷入口1">
            <el-select v-model="quickData.options1" clearable placeholder="选择菜单">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口2">
            <el-select v-model="quickData.options2" clearable placeholder="选择菜单">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口3">
            <el-select v-model="quickData.options3" clearable placeholder="选择菜单">
              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口4">
            <el-select v-model="quickData.options4" clearable placeholder="选择菜单">
              <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口5">
            <el-select v-model="quickData.options5" clearable placeholder="选择菜单">
              <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口6">
            <el-select v-model="quickData.options6" clearable placeholder="选择菜单">
              <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid" label="快捷入口7">
            <el-select v-model="quickData.options7" clearable placeholder="选择菜单">
              <el-option v-for="item in options7" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid">
            <el-button type="primary" @click="setList">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { mapGetters } from 'vuex'
  import { customNavigationBar } from '@/api/api'
  import { asyncRoutes } from '@/router/index'
  export default {
    mixins: [listMixin],
    data() {
      return {
        options1: [],
        options2: [],
        options3: [],
        options4: [],
        options5: [],
        options6: [],
        options7: [],
        quickData: {
          options1: '',
          options2: '',
          options3: '',
          options4: '',
          options5: '',
          options6: '',
          options7: '',
        },
        routeValue: [],
        quickList: [],
        isStatus: false,
        ary: []
      }
    },
    computed: {
      ...mapGetters([
        'routeList'
      ])
    },
    mounted() {
      this.setData()

      this.setSelect()
    },
    methods: {
      // 设置快捷入口下拉框
      setSelect() {
        this.routeValue = []
        this.routeRorEach(asyncRoutes)
        this.options1 = this.routeValue
        this.options2 = this.routeValue
        this.options3 = this.routeValue
        this.options4 = this.routeValue
        this.options5 = this.routeValue
        this.options6 = this.routeValue
        this.options7 = this.routeValue
      },
      // 获取所有路由
      routeRorEach(value) {
        value.forEach(item => {
          if (item.children) {
            this.routeRorEach(item.children)
          } else {
            this.routeValue.push({
              label: item.meta.title,
              value: item.name
            })
          }
        })
      },
      // 获取设置的快捷入口
      async setData() {

        try {
          let obj = { pageIndex: 1, pageSize: 10 }
          // 查询
          let response = await customNavigationBar('post', obj, false)
          this.ary = response.data.items
          // 获取所有快捷入口字段
          let keyList = Object.keys(this.quickData)
          if (this.ary.length > 0) {
            this.isStatus = true
            this.ary.forEach((edit, index) => {
              // 回显快捷入口
              this.quickData[keyList[index]] = edit.url
            })
          } else {
            this.isStatus = false
          }
          let list = []
          // 循环获取提交的数据
          keyList.forEach(item => {
            this.routeList.forEach(edit => {
              if (item === edit.title) {
                list.push({
                  title: item,
                  value: this.quickData[item]
                })
              }
            })
          })
          let quickList = JSON.parse(JSON.stringify(list))
          await this.$store.dispatch('user/quickMenu', quickList)
        } catch (err) {
          console.log(err)
        }
      },
      // 设置快捷接口
      async setList() {
        try {
          let arr = []
          // 获取所有快捷入口字段
          let keyList = Object.keys(this.quickData)
          // 循环获取提交的数据
          keyList.forEach((item, index) => {
            if (this.quickData[item]) {
              this.routeValue.forEach(val => {
                if (this.quickData[item] === val.value) {
                  arr.push({
                    name: val.label,
                    url: val.value,
                    order: index + 1 + ''
                  })
                }
              })
            } else {
              arr.push({
                name: '',
                url: '',
                order: index + 1 + ''
              })
            }
          })

          this.ary.forEach(list => {
            arr.forEach(edit => {
              if (list.order === edit.order) {
                edit.id = list.id
              }
            })
          })
          let flag = false
          arr.forEach((op, index) => {
            arr.forEach((asd, dex) => {
              if (index !== dex && op.url && op.url === asd.url) {
                flag = true
              }
            })
          })
          if (flag) {
            this.$message.warning('快捷接口设置重复！')
            return
          }
          // 提交
          await customNavigationBar('put', arr, true)
          this.$message.success('设置成功！')
          this.setData()
        } catch (err) {
          console.log(err)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wid {
    width: 300px;
  }
</style>
